<template>
    <div class="main-my-profile-password">
        <van-form @submit="onSubmit" :show-error-message="false" >
            <van-field
                class="password"
                :style="{marginBottom: '40px'}"
                v-model="userFrom.oldpassword"
                name="password"
                type="password"
                placeholder="Old Password"
                label-width="1rem"
                :rules="[{ required: true, message: 'password is required'}]"
            >
                <template #label>
                    <div class="input-label">
                        <van-image
                            width="13px"
                            :src="lock"
                        />
                    </div>
                </template>
                <template #right-icon>
                    <van-icon name="eye-o" size="24px" color="#FF5E00" class="eye" />
                </template>
            </van-field>
            <van-field
                :style="{marginBottom: '10px'}"
                class="password"
                v-model="userFrom.newpassword"
                name="newpassword"
                type="password"
                placeholder="New Password"
                label-width="1rem"
                :rules="[{ required: true, message: 'newpassword is required'}]"
            >
                <template #label>
                    <div class="input-label">
                        <van-image
                            width="13px"
                            :src="lock"
                        />
                    </div>
                </template>
                <template #right-icon>
                    <van-icon name="eye-o" size="24px" color="#FF5E00" class="eye" />
                </template>
            </van-field>
            <van-field
                class="password"
                v-model="userFrom.confirmpassword"
                name="confirmpassword"
                type="password"
                placeholder="Confirm Password"
                label-width="1rem"
                :rules="[{ required: true, message: 'confirmpassword is required'}]"
            >
                <template #label>
                    <div class="input-label">
                        <van-image
                            width="13px"
                            :src="lock"
                        />
                    </div>
                </template>
                <template #right-icon>
                    <van-icon name="eye-o" size="24px" color="#FF5E00" class="eye" />
                </template>
            </van-field>
        </van-form>
        <div class="btns">
            <div class="btn">
                <van-button round block type="primary" :style="{marginBottom: '15px'}"><strong>Confirm</strong></van-button>
                <van-button round block type="primary" plain><strong>Back To Sign In</strong></van-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch  } from 'vue'
import lock from '../../../assets/lock.png'

const userFrom = {
    oldpassword: '',
    newpassword: '',
    confirmpassword: ''
}

const onSubmit = () => {

}



</script>

<style lang="less" scoped>
.main-my-profile-password {
    padding: 40px 16px 0px 16px ;
    .btns {
        height: 80px;
        .btn {
            position: fixed;
            width: calc(100vw - 32px);
            margin: 0px 16px;
            bottom: 80px;
            left: 0px;
        }
    }
    .input-label {
        height: 28px;
        display: flex;
        align-items: center;
    }
}
</style>
